﻿@page "/menu-bar/scrollable"

@using Syncfusion.Blazor.Navigations

@inherits SampleBaseComponent

<SampleDescription>
    <p> This sample demonstrates the Scrollable option in the Menu component. Click the scroll arrows to view the hidden menu items.</p>
</SampleDescription>
<ActionDescription>
   <p>The <code>Menu</code> component supports horizontal scrolling to render large menus and submenus in an adaptive way. This can be achieved by enabling the <b>EnableScrolling</b> property and by restricting the corresponding menu/submenu size.</p>
   <p>In this demo, the parent menu is horizontally scrollable while the submenu and nested submenu are vertically scrollable.</p>
   <p>More information about Blazor Menu component can be found in this <a target=""_blank"" href="https://blazor.syncfusion.com/documentation/menu-bar/getting-started/"> documentation </a> section.</p>
</ActionDescription>

<div class="control-section">
    <div class="menu-control">
        <SfMenu CssClass="e-custom-scroll" EnableScrolling="true" TValue="MenuItem">
            <MenuEvents TValue="MenuItem" OnOpen="@beforeOpenHandler"></MenuEvents>
            <MenuItems>
                <MenuItem Text="Appliances">
                    <MenuItems>
                        <MenuItem Text="Kitchen">
                            <MenuItems>
                                <MenuItem Text="Electric Cookers"></MenuItem>
                                <MenuItem Text="Coffee Makers"></MenuItem>
                                <MenuItem Text="Blenders"></MenuItem>
                                <MenuItem Text="Microwave Ovens"></MenuItem>
                            </MenuItems>
                        </MenuItem>
                        <MenuItem Text="Television">
                            <MenuItems>
                                <MenuItem Text="Our Exclusive TVs"></MenuItem>
                                <MenuItem Text="Smart TVs"></MenuItem>
                                <MenuItem Text="Big Screen TVs"></MenuItem>
                            </MenuItems>
                        </MenuItem>
                        <MenuItem Text="Washing Machine"></MenuItem>
                        <MenuItem Text="Refrigerators">
                            <MenuItems>
                                <MenuItem Text="Inverter ACs"></MenuItem>
                                <MenuItem Text="Split ACs"></MenuItem>
                                <MenuItem Text="Window ACs"></MenuItem>
                            </MenuItems>
                        </MenuItem>
                        <MenuItem Text="Air Conditioners"></MenuItem>
                        <MenuItem Text="Water Purifiers"></MenuItem>
                        <MenuItem Text="Air Purifiers"></MenuItem>
                        <MenuItem Text="Chimneys"></MenuItem>
                        <MenuItem Text="Inverters"></MenuItem>
                        <MenuItem Text="Healthy Living"></MenuItem>
                        <MenuItem Text="Vacuum Cleaners"></MenuItem>
                        <MenuItem Text="Room Heaters"></MenuItem>
                        <MenuItem Text="New Launches"></MenuItem>
                    </MenuItems>
                </MenuItem>
                <MenuItem Text="Accessories">
                    <MenuItems>
                        <MenuItem Text="Mobile">
                            <MenuItems>
                                <MenuItem Text="Headphones"></MenuItem>
                                <MenuItem Text="Batteries"></MenuItem>
                                <MenuItem Text="Memory Cards"></MenuItem>
                                <MenuItem Text="Power Banks"></MenuItem>
                                <MenuItem Text="Mobile Cases"></MenuItem>
                                <MenuItem Text="Screen Protectors"></MenuItem>
                                <MenuItem Text="Data Cables"></MenuItem>
                                <MenuItem Text="Chargers"></MenuItem>
                                <MenuItem Text="Selfie Sticks"></MenuItem>
                                <MenuItem Text="OTG Cable"></MenuItem>
                            </MenuItems>
                        </MenuItem>
                        <MenuItem Text="Laptops"></MenuItem>
                        <MenuItem Text="Desktop PC">
                            <MenuItems>
                                <MenuItem Text="Pendrives"></MenuItem>
                                <MenuItem Text="External Hard Disks"></MenuItem>
                                <MenuItem Text="Monitors"></MenuItem>
                                <MenuItem Text="Keyboards"></MenuItem>
                            </MenuItems>
                        </MenuItem>
                        <MenuItem Text="Camera">
                            <MenuItems>
                                <MenuItem Text="Lens"></MenuItem>
                                <MenuItem Text="Tripods"></MenuItem>
                            </MenuItems>
                        </MenuItem>
                    </MenuItems>
                </MenuItem>
                <MenuItem Text="Fashion">
                    <MenuItems>
                        <MenuItem Text="Men"></MenuItem>
                        <MenuItem Text="Women"></MenuItem>
                    </MenuItems>
                </MenuItem>
                <MenuItem Text="Home & Living">
                    <MenuItems>
                        <MenuItem Text="Furniture"></MenuItem>
                        <MenuItem Text="Decor"></MenuItem>
                        <MenuItem Text="Smart Home Automation"></MenuItem>
                        <MenuItem Text="Dining & Serving"></MenuItem>
                    </MenuItems>
                </MenuItem>
                <MenuItem Text="Entertainment">
                    <MenuItems>
                        <MenuItem Text="Televisions"></MenuItem>
                        <MenuItem Text="Home Theatres"></MenuItem>
                        <MenuItem Text="Gaming Laptops"></MenuItem>
                    </MenuItems>
                </MenuItem>
                <MenuItem Text="Contact Us"></MenuItem>
                <MenuItem Text="Help"></MenuItem>
            </MenuItems>
        </SfMenu>
    </div>
</div>

@code {
    private void beforeOpenHandler(BeforeOpenCloseMenuEventArgs<MenuItem> e)
    {
        if (e.ParentItem.Text == "Appliances")
            e.ScrollHeight = 320;
        else if (e.ParentItem.Text == "Mobile")
            e.ScrollHeight = 260;
    }
}

<style>
    .menu-control {
        margin-top: 45px;
        text-align: center;
    }
    
    .menu-control .e-menu-container.e-custom-scroll {
        width: 100%;
    }
    
    @@media only screen and (min-width: 768px) {
        .menu-control .e-menu-container.e-custom-scroll {
            width: 492px;
        }
    }
</style>